<template>
  <div>
    <!-- -->
    <div class="center">
      <div class="left" :style="style1"  @click="back"></div>
      <div class="center1">{{list1.name}}</div>
    </div>
    <div style="background: rgba(0, 0, 0,0.2);">
      <div class="main-body" @click.stop="disapperMinus" :style="{height: height + 'px'}" >
        <div v-if="list.length != 0" class="telecontroller-item" @touchstart="touchstart4" @touchend="touchEnd4" @click="ctrClick"  v-for="(item,index) in list" :key="index">
          <div style="display:none" @click.stop="clickMinus" class="t-e-div1"></div>
          <div class="div1" ><img src="../assets/kongtiao1.png"></div>
          <div class = "div2" :id ="index">{{list[index].name}}</div>
        </div>
        <div class="tianjia" @click="tianjia">
          <img src="../assets/tianjia.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import BaseHeader from "../components/BaseHeader.vue";

  export default {
    components: {BaseHeader},
    data() {
      return {
        style1:{
          backgroundImage: 'url(' + require('../assets/back.png') + ')'
        },
        height: window.innerHeight - (282*(window.innerWidth/1080)),
        itemWidth: (window.innerWidth - 70) / 4,
        showMinus:false,
        setTimeOutMinus:'',
        list: [
         {
           name: '大金1',
           tid: 7
         },
         {
           name: '大金2',
           tid: 1
         },
         {
           name: '大金3',
           tid: 7
         },
         {
           name: '大金4',
           tid: 1
         },
         {
           name: '大金5',
           tid: 1
         },
         {
           name: '大金6',
           tid: 1
         },
         {
           name: '大金4',
           tid: 1
         },
         {
           name: '大金5',
           tid: 1
         },
         {
           name: '大金6',
           tid: 1
         },
        ],
        list1:[],
        list2:[],
        styleList:{
          7:{
            backgroundImage: 'url(../assets/kongtiao1.png)'
          }
        }
      }
    },
    created() {
       window.native_callback_config = this.native_callback_config;
       window.native_callback_info = this.native_callback_info;
    },
    mounted() {
      this.request_info(1)
      this.request_config(1, 3)
    },
    methods: {
      // native_callback_config(info){
      //   return "1"
      // },
      //native回调方法
      native_callback_info(pid, errCode, param) {
        //Todo
        console.log('callback set token info');
        console.log('pid: '+ pid + ' errCode: ' + errCode + ' param: ' + param);
        if(pid == 10086) { // resume刷新
          console.log('resume refresh');
          return '1';
        }
        if(errCode == 0) {
          var jsonParam = JSON.parse(param);
          var wifiId = jsonParam.wifiid;
          var deviceId = jsonParam.deviceid;
          var token = jsonParam.token;
          var mode = jsonParam.mode;
          var deviceNickName = jsonParam.devicename;
          var areaName = jsonParam.areaname;
        }
        return '1'
      },
      native_callback_config(pid, errCode, jsonStr) {
        //Todo
        console.log("pid-" + pid + " errCode-" + errCode + "data-" + jsonStr);
        if(errCode == 0) {

        }
        return '3'
      },

      request_info(pid) {
          if(localStorage.getItem('from') !== 'android') {
            //console.log("is isiOS");
            //alert("1111")
            window.webkit.messageHandlers.request_info.postMessage(1)
            // window.location.href = "ios://request_info##" + 1;
          }else {
            //console.log("is Android");
            window.android.request_info(1)
          }

      },

      request_config(pid, type) {
        if(localStorage.getItem('from') !== 'android'){
          window.webkit.messageHandlers.request_config.postMessage(1,3)
          // window.location.href = "ios://request_config##" + 1;
        }
        else{
          window.android.request_config(1,3)
        }
      },
      back(){
        this.request_button('4', '8', '9')
      },
      request_button(pid, key, para) {
        if(localStorage.getItem('from') !== 'android'){
          window.location.href = "ios://request_button##" + pid + "##" + key + "##" + para;
          // window.webkit.messageHandlers.request_config.postMessage(1,3)
        }
        else {
          window.android.request_button(pid, key, para);
        }
      },
      requestConfigList(v){
        this.list1 = v.native_callback_config
      },
      requestInfoList(v){
        this.list = v.native_callback_info
      },
      clickMinus(){
        console.log("删除")
      },
      tianjia(){
        this.$router.push({name: 'TelecontrollerType'})
      },
      ctrClick(){
        console.log(1)
      },
      touchstart4(event){  
        clearTimeout(this.setTimeoutMinus);
        this.setTimeOutMinus = setTimeout(function(){
          let divobj = $('.'+event.target.className);
          console.log(event.target.className);
          let index =event.target.id;
          divobj.eq(index).siblings(".t-e-div1").css("display" , "block");
        },1500)
      },
      touchEnd4(){
        clearTimeout(this.setTimeoutMinus);
      },
      disapperMinus(){
          $(".t-e-div1").css("display" , "none")
      }
    }
  }
</script>
<style scoped>
.center{
    height:0.66rem;
    padding:1.07rem 0.3rem 0.5rem 0.3rem;
    background: url(../assets/changxixian.png) no-repeat 0 2.2rem;
    background-size:100% 1px;
    display:flex;

}
.center .left{
  width:0.6rem;
  height:0.66rem;
  background-size:100% 100%;
}
.center .center1{
  width:3rem;
  height:0.66rem;
  margin-left:2.9rem;
  font-size:0.55rem;
  color:#fff;
  text-align:center;
  line-height:0.66rem;

}

  .main-body{
    display: block;
    flex-wrap:wrap;
    /* justify-content: space-between; */
    border-radius: 20px;
    /* align-content: flex-start; */
    padding: 0.6rem 0.38rem 0 0.38rem;
  }
  .tianjia{
    width: 2.4rem;
    height: 2.4rem;
    float:left;
    /* border: 1px solid red; */
  }
  .tianjia img{
    width: 100%;
    height: 100%;
    display: block;
    float: left;
    border-radius: 20px;
  }

  .telecontroller-item {
    /* border:1px solid red; */
    width: 2.41rem;
    height: 2.42rem;
    display: block;
    position: relative;
    text-align: center;
    font-size: 0.28rem;
    color: #02606a;
    background-color: #93d9e1;
    border-radius: 20px;
    margin-right: 0.10rem;
    margin-bottom: 0.6rem;
    float:left;
  }
    .telecontroller-item .div1{

      width: 2.41rem;
      height: 1.76rem;
      border-top-left-radius:20px;
      border-top-right-radius:20px;
    }
     .telecontroller-item .div1 img{
       width: 100%;
       height: 100%;
       display: block;
       float: left;
       border-top-left-radius:20px;
        border-top-right-radius:20px;
     }

     .telecontroller-item .div2{
        font-size: 0.28rem;
        color: #02606a;
        width: 2.41rem;
        height: 0.66rem;
        text-align: center;
        line-height: 0.66rem;
     }
  .telecontroller-item .t-e-div1{
    width: 0.62rem;
    height: 0.62rem;
    background: url(../assets/jianhao.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    border-radius: 0.62rem;
    right: -5px;
    top: -5px;
    z-index: 10;
  }
  .telecontroller-item.last{
    margin-right: 0;
  }

</style>
